<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0,user-scalable=0,maximum-scale=1.0,minimum-scale=1.0" />
	<link rel="stylesheet" href="css/media.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.css">
	<link rel="stylesheet" href="css/order-list.css">
	<link rel="stylesheet" href="./fonts/index_iconfonts/iconfont.css">
	<script src="js/order-list.js"></script>
	<title>订单列表</title>
</head>

<body>
	<!-- 在上面的卡片 z-index默认值为1 -->
	<div id="front">

		<!-- 头部 -->
		<header id="hd">
			<span>全部</span>
				<a href="gouwuche.html" class="iconfont icon-arrow"></a>		
		</header>

		<!-- 收货地址 -->
		<div id="local">
			<div class="local-map">
				<span>选择收货地址</span>
				<a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
			</div>
			<div class="now"><span>立即送出</span></div>
		</div>

		<!-- 商品列表信息 -->
		<div id="order">
			<div class="shop">
				<span>好厨云火锅（天府三街店）</span><i class="fa fa-angle-right" aria-hidden="true"></i>
			</div>
			<ul class="goods">
				<li class="row">
					<div class="row-le"><img src="images/zyr/Snipaste_2021-07-17_15-55-00.jpg" alt=""></div>
					<div class="row-cen"><span>广味小香肠(250g)</span>
						<span>×1</span>
					</div>
					<div class="row-ri">¥19.9</div>
				</li>

				<li class="row">
					<div class="row-le"><img src="images/zyr/Snipaste_2021-07-17_15-55-00.jpg" alt=""></div>
					<div class="row-cen"><span>广味小香肠(250g)</span>
						<span>×1</span>
					</div>
					<div class="row-ri">¥19.9</div>
				</li>

				<li class="row">
					<div class="row-le"><img src="images/zyr/Snipaste_2021-07-17_15-55-00.jpg" alt=""></div>
					<div class="row-cen"><span>广味小香肠(250g)</span>
						<span>×1</span>
					</div>
					<div class="row-ri">¥19.9</div>
				</li>

				<li class="row">
					<div class="row-le"><img src="images/zyr/Snipaste_2021-07-17_15-55-00.jpg" alt=""></div>
					<div class="row-cen"><span>广味小香肠(250g)</span>
						<span>×1</span>
					</div>
					<div class="row-ri">¥19.9</div>
				</li>
			</ul>

			<ul class="count">
				<!-- 费用结算板块 -->
				<li class="unfold">
					<a href="#"><span>展开(共12件)</span>
						<i class="fa fa-angle-down" aria-hidden="true"></i></a>
				</li>
				<li class="fee"><span>配送费</span>
					<span>¥6</span>
				</li>
				<li class="discount"><span>优惠券</span>
					<span style="color:rgb(219, 55, 43);">-¥6</span>
				</li>
			</ul>
			<hr id="order-hr">
			<ul class="total">
				<li>已优惠</li>
				<li>¥6</li>
				<li>小计</li>
				<li>¥</li>
				<li>199.99</li>
			</ul>
		</div>

		<!-- 订单编号及发票 -->
		<div id="information">
			<div class="name">订单信息</div>
			<hr id="infor-hr1">
			<div class="number">
				<span>订单号</span>
				<span>5011 9281 9446 2622 804</span>
			</div>
			<hr id="infor-hr2">
			<div class="invoice">
				<span>发票</span>
				<span>请联系在线客服开具发票</span>
			</div>
		</div>
		<hr id="foot">

		<!-- 付款 -->
		<div id="payment">
			<div class="real-pay"><span>实付款</span>
				<span>¥19.80</span>
			</div>
			<div id="now-pay">立即支付</div>
		</div>
	</div>

	<!-- 隐藏的背部卡片  z-index默认值为0 -->
	<div id="back">
		<div class="tips">温馨提示</div>
		<div class="please-addr">请添加收货地址</div>
		<div id="i-know">知道了</div>
	</div>
</body>

</html>